<template>
	<view>
		<!-- 轮播图 -->
		<u-swiper 
			:list="slides" 
			keyName="img_url"
			height="150"
			@change="swiperChange" 
			@click="swiperClick"
			indicator
			indicatorMode="dot"
			circular
		></u-swiper>
		
		<!-- tabar排序 -->
		<!--自定义tab的样式: itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" -->
		<!--自定义tab的样式: itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" -->
		<u-tabs
			:list="tabList"
			@click="tabClick"
			:current="currentSort"
			lineWidth=40px
			:activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
			:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}"
			itemStyle="padding-left: 15px; padding-right: 15px; padding-top: 10px;  height: 40px;"
		></u-tabs>

		
		<!-- 加载显示样式 -->
		<u-loading-icon :show="loading"></u-loading-icon>
		<!-- 布局 一个row是12-->
		<u-row class="box">
			<u-col span="6" v-for="goods in goodsList">
				<goods-card :goods="goods" :loading="loading"></goods-card>  <!-- item是变量所以加上双引号可进行双向绑定-->
			</u-col>
		</u-row>
		
		<!-- 圆形加载图片 -->
		<!-- <u-loading-icon></u-loading-icon> -->
		<!-- 下滑骨架屏 -->
		<!-- <u-skeleton
			rows="1"
			rowsWidth="100%"
			:title="false"
			:loading="loadingBottom"
			:animate="true"
		></u-skeleton>
		 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:  [{
                    name: '默认',
                }, {
                    name: '销量',
                }, {
                    name: '推荐'
                }, {
                    name: '最新'
                }],
				currentSort: 0,
				goodsList: [{},{},{},{}],
				categories: [],
				slides: [],
				page: 1,
				loading: false,
				// loadingBottom: true,
			}
		},
		onLoad() {
			// this.$u.utils.isLogin();  //触发判断是否已经登陆
			this.getData();
		},
		methods: {
			tabClick(item){
				this.currentSort=item.index;
				this.goodsList=[{},{},{},{}];  //换类型之后需要清空goods，从新获取
				this.page=1;
				this.getData();
				// console.log('item',item);
			},
			async getData(){
				this.loading = true;
				const params = {
					page:this.page
				};
				if(this.currentSort == 1) params.sales=1;
				if(this.currentSort == 2) params.recommend=1;
				if(this.currentSort == 3) params.new=1;
				
				const res =await uni.$u.api.index(params);
				// console.log(res);
				this.goodsList = this.goodsList.pop().title ? [...this.goodsList,...res.goods.data]:res.goods.data;
				this.slides = res.slides;
				this.loading = false;
			},
			swiperClick(){
				
			},
			swiperChange(){
				
			}
		},
		onReachBottom() {
			//触底的时候从新请求数据，传递一个分页的参数
			this.page = this.page + 1;
			// this.loadingBottom = true; //下拉加载
			this.getData();
			// this.loadingBottom = false;
		}
	}
</script>

<style lang="scss" scoped>   //scoped 防止样式污染,如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
	.box{
		flex-wrap: wrap;
	};
</style>
